<template>
    <div class="cinema">
        <van-card   v-for="(item,index) in cinemaList" :key="item.index" @click="gocinemaDetail(cinemaId[index]) "
            :desc="address[index]"
            :title="title[index]"
            >
            <template #tags>
                <van-tag plain type="danger"  color="#7EB3C1" text-color="#7EB3C1">退</van-tag>&nbsp;&nbsp;
                <van-tag plain type="danger" color="#7EB3C1" text-color="#7EB3C1">改签</van-tag>&nbsp;&nbsp;
                <van-tag plain type="danger">折扣卡</van-tag>&nbsp;&nbsp;
                <van-tag plain type="danger">改签</van-tag>&nbsp;&nbsp;
                <van-tag plain type="danger">改签</van-tag> &nbsp;&nbsp;
            </template>
            <template #footer>
                <div class="price"><span class="p-num"> {{price*(index+1)}}</span>元起</div>
                <div class="meter">{{cinemadistance[index]}}</div>
            </template>
        </van-card>
    </div>
</template>
<script>
import Vue from 'vue';
import { Card } from 'vant';
import uri from '@/config/uri'
Vue.use(Card);
export default {
    data(){
        return {
            cinemaId:[],
            address:[],
            title:[],
            cinemaList:[],
           cinemadistance:[],
            price:(Math.random()+6).toFixed(0)
        }
    },
    created(){
        let cid = localStorage.getItem('cityid')
        this.$http.get('https://www.fastmock.site/mock/690c5d7e8e77e734635c68761e4a91c3/cinemaList/cinema_id').then((req) => {
                req.forEach((el,index) => {
                   this.cinemaId.push(parseInt(el.link.replace('https://maoyan.com/cinema/',''))) 
                    this.address.push(el.address.slice(8,50))
                    this.title.push(el.title)
                    this.cinemadistance.push(el.cinemadistance)
                });
                    this.cinemaList = [...this.cinemaList,...req];
                    // console.log(this.address);
            });
    },
    methods:{
        gocinemaDetail(id){
            this.$router.push('/cinemaDetail?cinemaId='+id)
        }
    }
}
</script>
<style scoped>
.cinema {
    margin-top:120px;
}
.van-card {
    height: 124px;
    margin-bottom:20px;
    /* border-top: 1px solid gray;
     border-bottom: 1px solid gray; */
     box-sizing: border-box;
     padding:20px;
}
.van-card__header {
    width:70%;
    float:left;
    line-height: 30px;
}
.van-card__footer {
    width:30%;
    float: left;
}
.van-card__title {
    line-height: 23px;
    font-size: 16px;
    color: #000;
}
.price {
    color: #f03d37;
    margin-bottom: 10px;
}
.p-num {
    font-size: 18px;
}
.meter {
    font-size: 13px;
    color: #666;
}
</style>